<template>
  <div class="home">
    <banner></banner>
    <div class="lately" v-show="hasLate">
      <h1 class="title">最近游戏</h1>
      <div class="lately-wrapper" ref="pics">
        <ul class="lately-list">
          <li class="lately-item" v-for="(item,index) in latelyGame" :key="index">
            <!-- 上面放图片 -->
            <a href="javascript:;" class="img" @click="startGame(item.url)">
              <img width="100%" height="100%" :src="item.icon">
            </a>
            <!-- 底下放按钮 -->
            <p class="lately-name">
              {{item.name}}
            </p>
          </li>
        </ul>
      </div>
    </div>
    <tabbar :tab-array="tabArray"></tabbar>
    <transition name="fade">
      <div class="loading" v-show="loading"></div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import banner from '../common/banner/banner'
  import title from '../common/title/title'
  import split from '../common/split/split'
  import tabbar from '../common/tabbar/tabbar'
  import {startGame} from '../../assets/js/common'

  export default {
    data() {
      return {
        latelyGame: [],
        hasLate: false,
        loading: false,
        tabArray: [
          {
            text: '游戏',
            name: 'game',
            router: '/home/game/gameHot'
          },
          {
            text: '活动',
            name: 'activity',
            routerName: 'active',
            router: '/home/activity/active'
          },
          {
            text: '开服表',
            name: 'open',
            routerName: 'opening',
            router: '/home/open/opening'
          },
          {
            text: '榜单',
            name: 'ranking',
            routerName: 'popular',
            router: '/home/ranking/popular'
          }
        ]
      }
    },
    created() {
      this.$http.get('/game/index.php?m=Home&c=Api&a=getRecentlyGameLists').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          this.latelyGame = response.data.data
          if (this.latelyGame.length > 0) {
            this.hasLate = true
          }
        }
      })
      let positionY = localStorage.getItem('positionY')
      if (positionY && positionY !== '0') {
        this.Indicator.open({
          text: '拼命加载中(⊙o⊙)...',
          spinnerType: 'fading-circle'
        })
        this.loading = true
      }
    },
    mounted() {
      this._initPicScroll()
      this.eventBus.$on('loading', (state) => {
        setTimeout(() => {
          this.loading = state
        }, 200)
      })
    },
    methods: {
      startGame,
      _initPicScroll() {
        this.$nextTick(() => {
          if (!this.picScroll) {
            this.picScroll = new BScroll(this.$refs.pics, {
              click: true,
              scrollX: true,
              scrollY: false
            })
          } else {
            this.picScroll.refresh()
          }
        })
      }
    },
    components: {
      banner: banner,
      VTitle: title,
      split: split,
      tabbar: tabbar
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .home
    .loading
      position fixed
      top 0
      left 0
      width 100%
      height 100%
      background #fff
    .lately
      position relative
      width 100%
      margin-bottom 24px
      .title
        margin 32px 0 24px 33px
      .lately-wrapper
        overflow hidden
        white-space nowrap
        .lately-list
          display inline-flex
          font-size 0
          padding 0 64px
          .lately-item
            width 112px
            margin-left 60px
            &:first-child
              margin 0
            .lately-name
              display block
              width 113px
              margin-top 16px
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
              font-size 28px
              color #666

  .fade-enter-active, .fade-leave-active
    transition opacity .5s

  .fade-enter, .fade-leave-to
    opacity 0
</style>
